<template>
	<!--岗位详情 -->
	<view class="page-content">
		<view class="page-body">
			<view class="box-row">
				<view class="input-row">
					<view class="input-row-t"><text class="required" v-if="required">*</text>岗位名：</view>
					<input class="input-row-w" type="text" v-model="objdata.name" placeholder="请输入岗位名"
						placeholder-style="color:#999;fontSize:13px"></input>
				</view>
			</view>
			<view class="tip">管理员权限</view>
			<view class="body-box">
				<block v-for="(item,index) in objlist" :key="index">
					<view class="body-box-ul" v-if="item.is_show">
						<view class="body-box-li">
							<view class="name2">{{item.name}}</view>
						</view>
						<block v-for="(ite,ind) in item.list" :key="ind">
							<view class="body-box-li">
								<view class="name">{{ite.name}}</view>
								<switch @change="switchChange(ite.id)" color="#198FFF" :checked="ite.statu"
									style="transform:scale(0.7)" />
							</view>
						</block>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		addRoles,editRoles,getRoleInfos
	} from '@/common/api.js';
	import store from '@/store'
	import wTit from '@/components/w-tit/w-tit-back.vue';
	import brandUpload from '@/pages/components/brand_upload.vue';
	import { arrayNonRepeatfy } from '@/common/util.js';//数组去重
	export default {
		components: {
			wTit,
			brandUpload
		},
		data() {
			return {
				required: false,
				objdata: {
					id:'',
					company_id:'',
					name: '',
					role:[]
				},
				objlist: [{
					name: '基础设置',
					role_id:1,
					list: [{
						name: '产品属性设置',
						statu: false,
						id:1
					}, {
						name: 'POP编码设置',
						statu: false,
						id:2
					}, {
						name: '道具编码设置',
						statu: false,
						id:3
					}, {
						name: 'POP材质设置',
						statu: false,
						id:4
					}, {
						name: '供应商报价单',
						statu: false,
						id:5
					}]
				}, {
					name: '通讯录',
					role_id:2,
					list: [{
						name: '成员管理',
						statu: false,
						id:6
					}, {
						name: '组别管理',
						statu: false,
						id:7
					}, {
						name: '权限管理',
						statu: false,
						id:8
					}]
				}, {
					name: '信息管理',
					role_id:3,
					list: [{
						name: '新闻管理',
						statu: false,
						id:9
					}, {
						name: '公告&通知管理',
						statu: false,
						id:10
					}, {
						name: '动态管理',
						statu: false,
						id:11
					}]
				
				}, {
					name: 'POP画册',
					role_id:4,
					list: [{
						name: 'POP画册管理',
						statu: false,
						id:12
					}]
				}, {
					name: 'POP下单',
					role_id:5,
					list: [{
						name: 'POP下单管理',
						statu: false,
						id:13
					}, {
						name: '数据统计功能',
						statu: false,
						id:14
					}]
				
				}, {
					name: '道具下单',
					role_id:6,
					list: [{
						name: '道具下单管理',
						statu: false,
						id:15
					}, {
						name: '数据统计功能',
						statu: false,
						id:16
					}]
				}],
				pageType:'',
				id:'',
			}
		},
		computed: {
			...mapGetters(['companyInfo','userInfo','companyRole']),arrayNonRepeatfy,
		},
		onLoad(option) {
			console.log(222,option)
			if (option.type === 'add') {
				this.pageType = option.type;
				this.getdetail2();
				
			} else if (option.type === 'edit') {
				this.pageType = option.type;
				this.objdata.name = option.name;
				if(option.id){
					this.objdata.id = option.id
					this.getdetail();
				}
			}
		},
		//导航按钮
		onNavigationBarButtonTap(e) {
			console.log(23, e)
			if (e.index == 0) {
				this.tosave();
			}
		},
		methods: {
			...mapActions('user', ['setToken']),
			getdetail2(){
				if(this.objlist && this.objlist.length>0){
					this.objlist.forEach(ite=>{
						this.$set(ite,'is_show',false)
						if(this.companyInfo.roleArr && this.companyInfo.roleArr.length>0){
							this.companyInfo.roleArr.forEach(ite2=>{
								if(ite.role_id == parseInt(ite2)){
								console.log(1111,ite2)
									ite.is_show = true
								}
							})
						}
					})
				}
				console.log(1111,this.objlist)
			},
			getdetail(){
				getRoleInfos({id:this.objdata.id}).then(res =>{
					if(res.code === 2000){
						this.objdata = res.data;
						if(res.data.role && res.data.role.length>0){
							res.data.role.forEach(item=>{
								if(this.objlist && this.objlist.length>0){
									this.objlist.forEach(ite=>{
										this.$set(ite,'is_show',false)
										if(this.companyInfo.roleArr && this.companyInfo.roleArr.length>0){
											this.companyInfo.roleArr.forEach(ite2=>{
												if(ite.role_id === parseInt(ite2)){
													ite.is_show = true
												}
											})
										}
										ite.list.forEach(i=>{
											if(i.id === item){
												i.statu = true
											}
										})
									})
								}
							})
						}
					}
					console.log(99,this.objlist)
				})
			},
			//switch
			switchChange(id) {
				this.objdata.role = [];
				if(this.objlist && this.objlist.length>0){
					this.objlist.forEach(item=>{
						item.list.forEach(ite=>{
							if(ite.id === id){
								ite.statu = !ite.statu
							}
						})
					})
				}
			},
			//保存
			tosave(){
				if (!!this.companyInfo) {
					this.objdata.company_id = this.companyInfo.id
				}
				let resdata = this.objdata;
				if (resdata.name === "") {
					uni.showToast({
						title: "岗位名称不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(this.objlist && this.objlist.length>0){
					this.objlist.forEach(item=>{
						item.list.forEach(ite=>{
							if(ite.statu){
								resdata.role.push(ite.id)
							}
						})
					})
				}
				resdata.role = resdata.role;
				console.log(2222,resdata.role)
				
				if(this.pageType === 'add'){
					addRoles(resdata).then(res => {
						console.log(123,res)
						if(res.code === 2000){
							uni.navigateBack({
								delta:1
							})
							setTimeout(() => {
							    uni.showToast({
							    	title:'添加成功！',
							    	icon:'none',
							    	duration:2000
							    })
							}, 100)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					})
				}else if(this.pageType === 'edit'){
					editRoles(resdata).then(res => {
						console.log(123,res)
						if(res.code === 2000){
							uni.navigateBack({
								delta:1
							})
							setTimeout(() => {
							    uni.showToast({
							    	title:'修改成功！',
							    	icon:'none',
							    	duration:2000
							    })
							}, 100)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					})
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
	}

	.icon-tb {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		background: $uni-bg-color;
		width: 100vw;
		height: 100%;
		border-top: 1rpx solid #f5f5f5;

		.body-box {
			.body-box-ul {
				display: flex;
				flex-direction: column;
				padding: 0 30rpx;
				border-bottom: 10rpx solid #f5f5f5;

				.body-box-li {
					padding: 0 20rpx;
					line-height: 100rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #f5f5f5;

					.name {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;
					}
					.name2 {
						font-size: 32rpx;
						font-weight: 600;
						color: $font-color-3;
					}
				}
			}
		}

		.page-body {
			display: flex;
			flex-direction: column;

			.tip {
				height: 50rpx;
				background: $uni-bg-color-grey;
				font-size: 22rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: $font-color-9;
				padding: 0 50rpx;
				line-height: 50rpx;
			}

			.box-row {
				padding: 0 50rpx;

				.input-row {
					display: flex;
					align-items: center;
					width: 100%;
					height: 100rpx;
					flex-direction: row;
					background: $uni-bg-box-color;

					.input-row-w {
						display: flex;
						flex: 1;
						width: 100%;
						color: $font-color-3;
						font-size: 32rpx;
					}

					.input-row-t {
						font-size: 32rpx;
						color: #333333;
					}
				}
			}

			.btn-row {
				width: 100%;
				padding: 0 30rpx;

				button {
					line-height: 100rpx;
					background: $uni-but-bg-color;
					font-size: 36rpx;
					color: $font-color-w;
					height: 100rpx;
					box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.19);
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
